<template>
  <div class="workbanch-page">
    <AreaTitleWarp :title="'总额统计'"></AreaTitleWarp>
    <div class="totalStatistics">
      <!-- 用户 -->
      <ul class="total-warp" v-if="isShowTotalUser">
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">注册数(人)</div>
            <img src="../../../assets/img/icon1.png" alt>
          </div>
          <div class="total-item-number">{{ totalUser.registCount }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">申请数(笔)</div>
            <img src="../../../assets/img/icon2@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalUser.applyCount }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">通过数(笔)</div>
            <img src="../../../assets/img/icon3@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalUser.passCount }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">放款数(笔)</div>
            <img src="../../../assets/img/icon4@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalUser.payCount }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">还款数(笔)</div>
            <img src="../../../assets/img/icon5@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalUser.repayCount }}</div>
        </li>
      </ul>
      <!-- 财务 -->
      <ul class="total-warp finance" v-if="isShowTotalFinance">
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">放款金额(元)</div>
            <img src="../../../assets/img/icon4@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalFinance.payMoney }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">还款金额(元)</div>
            <img src="../../../assets/img/icon5@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalFinance.repayMoney }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">入催率</div>
            <img src="../../../assets/img/icon8@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalFinance.overduePercent }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">出催率</div>
            <img src="../../../assets/img/icon9@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalFinance.overdueRepayPercent }}</div>
        </li>
        <li class="total-item">
          <div class="total-item-title">
            <div class="total-item-text">资损率</div>
            <img src="../../../assets/img/icon10@1x.png" alt>
          </div>
          <div class="total-item-number">{{ totalFinance.capitalLossPercent }}</div>
        </li>
      </ul>
    </div>

    <AreaTitleWarp :title="'每日数据'"></AreaTitleWarp>
    <div class="dailyData">
      <!-- 借款 -->
      <div class="dailyBorrow-warp data-warp" v-if="isShowBorrow">
        <div class="dailyData-display">
          <ul class="dailyData-item">
            <li class="data-title"></li>
            <li class="data-title">注册人数(人)</li>
            <li class="data-title">申请笔数(笔)</li>
            <li class="data-title">通过笔数(笔)</li>
            <li class="data-title">放款笔数(笔)</li>
          </ul>
          <ul class="dailyData-item" v-for="item in dailyBorrowList">
            <li class="data-time">{{ item.date == new Date().Format('MM-dd') ? '今日' : '昨日' }}</li>
            <li class="data-number">{{ item.registCount }}</li>
            <li class="data-number">{{ item.applyCount }}</li>
            <li class="data-number">{{ item.passCount }}</li>
            <li class="data-number">{{ item.payCount }}</li>
          </ul>
        </div>
        <div class="dailyData-echarts" ref="borrowEcharts"></div>
      </div>
      <!-- 还款 -->
      <div class="dailyRepay-warp data-warp" v-if="isShowRepay">
        <div class="dailyData-display">
          <ul class="dailyData-item">
            <li class="data-title"></li>
            <li class="data-title">总还款笔数(笔)</li>
            <li class="data-title">到期笔数(笔)</li>
            <li class="data-title">到期未还笔数(笔)</li>
            <li class="data-title">未还比率</li>
          </ul>
          <ul class="dailyData-item" v-for="item in dailyRepayList">
            <li class="data-time">{{ item.date == new Date().Format('MM-dd') ? '今日' : '昨日' }}</li>
            <li class="data-number">{{ item.repayCount }}</li>
            <li class="data-number">{{ item.shouldRepayCount }}</li>
            <li class="data-number">{{ item.unrepayCount }}</li>
            <li class="data-number">{{ item.overduePercent }}</li>
          </ul>
        </div>
        <div class="dailyData-echarts" ref="repayEcharts"></div>
      </div>
      <!-- 财务 -->
      <div class="dailyFinance-warp data-warp" v-if="isShowFinance">
        <div class="dailyData-display">
          <ul class="dailyData-item">
            <li class="data-title finance-item"></li>
            <li class="data-title finance-item">放款金额(元)</li>
            <li class="data-title finance-item">还款金额(元)</li>
          </ul>
          <ul class="dailyData-item" v-for="item in dailyFinanceList">
            <li
              class="data-time finance-item"
            >{{ item.date == new Date().Format('MM-dd') ? '今日' : '昨日' }}</li>
            <li class="data-number finance-item">{{ item.payMoney }}</li>
            <li class="data-number finance-item">{{ item.repayMoney }}</li>
          </ul>
        </div>
        <div class="dailyData-echarts" ref="financeEcharts"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      totalUser: {}, //总额用户
      totalFinance: {}, //总额财务
      dailyBorrowList: [], //每日用户借款-前两条
      dailyRepayList: [], //每日用户还款-前两条
      dailyFinanceList: [], //每日财务金额-前两条
      dailyBorrow: [], //每日用户借款
      dailyRepay: [], //每日用户还款
      dailyFinance: [], //每日财务金额
      borrowOpt: {},
      repayOpt: {},
      financeOpt: {},
      isShowTotalUser: false, //是否显示总额用户
      isShowTotalFinance: false, //是否显示总额财务
      isShowBorrow: false, //是否显示每日借款
      isShowRepay: false, //是否显示每日还款
      isShowFinance: false //是否显示每日财务
    };
  },
  methods: {
    //总额用户
    getTotalUser() {
      let that = this;
      that.ajaxJson({
        url: "/stats/dashboard/totalUser",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            that.totalUser = res.data;
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },
    //总额财务
    getTotalFinance() {
      let that = this;
      that.ajaxJson({
        url: "/stats/dashboard/totalFinance",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            that.totalFinance = res.data;
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },
    //每日用户借款
    getDaliyBorrow() {
      let that = this;
      that.ajaxJson({
        url: "/stats/dashboard/dailyBorrowInfo",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            that.dailyBorrowList = res.data.slice(0, 2);
            that.dailyBorrow = res.data;
            that.initDailyBorrow();
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },
    //每日用户还款
    getDailyRepay() {
      let that = this;
      that.ajaxJson({
        url: "/stats/dashboard/dailyRepayInfo",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            that.dailyRepayList = res.data.slice(0, 2);
            that.dailyRepay = res.data;
            that.initDailyRepay();
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },
    //每日财务金额
    getDailyFinance() {
      let that = this;
      that.ajaxJson({
        url: "/stats/dashboard/dailyFinanceInfo",
        data: {},
        success: function(res) {
          if (res.code == "0") {
            that.dailyFinanceList = res.data.slice(0, 2);
            that.dailyFinance = res.data;
            that.initDailyFinance();
          } else {
            that.showMsg(res.message, "error");
          }
        }
      });
    },
    //用户借款表
    initDailyBorrow() {
      let that = this;
      let dailyBorrow = that.dailyBorrow || [];
      let date = [];
      let registCount = [];
      let applyCount = [];
      let passCount = [];
      let payCount = [];
      for(let i=0;i<dailyBorrow.length;i++){
        dailyBorrow[i].date = dailyBorrow[i].date.slice(5);
        date.push(dailyBorrow[i].date)
        registCount.push(dailyBorrow[i].registCount)
        applyCount.push(dailyBorrow[i].applyCount)
        passCount.push(dailyBorrow[i].passCount)
        payCount.push(dailyBorrow[i].payCount)

      }
      // dailyBorrow.forEach(item => {
      //   item.date = item.date.slice(5);
      //   date.push(item.date);
      //   registCount.push(item.registCount);
      //   applyCount.push(item.applyCount);
      //   passCount.push(item.passCount);
      //   payCount.push(item.payCount);
      // });
      date = date.reverse();
      registCount = registCount.reverse();
      applyCount = applyCount.reverse();
      passCount = passCount.reverse();
      payCount = payCount.reverse();

      that.borrowOpt = {
        color: ["#F2592F", "#FFB801", "#69B6F2", "#B278DC"],
        legend: {
          data: [
            "注册人数(人)",
            "申请笔数(笔)",
            "通过笔数(笔)",
            "放款笔数(笔)"
          ],
          selectedMode: "multiple",
          selected: {
            "注册人数(人)": true,
            "申请笔数(笔)": false,
            "通过笔数(笔)": false,
            "放款笔数(笔)": false
          }
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: "category",
          data: date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "注册人数(人)",
            type: "line",
            data: registCount
          },
          {
            name: "申请笔数(笔)",
            type: "line",
            data: applyCount
          },
          {
            name: "通过笔数(笔)",
            type: "line",
            data: passCount
          },
          {
            name: "放款笔数(笔)",
            type: "line",
            data: payCount
          }
        ]
      };
      that.$nextTick(function() {
        let borrowDom = that.$refs.borrowEcharts;
        that.borrowEcharts = that.$echart.init(borrowDom);
        that.borrowEcharts.setOption(that.borrowOpt);
      });
    },
    //用户还款表
    initDailyRepay() {
      let that = this;
      let dailyRepay = that.dailyRepay || [];
      let date = [];
      let repayCount = [];
      let shouldRepayCount = [];
      let unrepayCount = [];
      dailyRepay.forEach(item => {
        item.date = item.date.slice(5);
        date.push(item.date);
        repayCount.push(item.repayCount);
        shouldRepayCount.push(item.shouldRepayCount);
        unrepayCount.push(item.unrepayCount);
      });
      date = date.reverse();
      repayCount = repayCount.reverse();
      shouldRepayCount = shouldRepayCount.reverse();
      unrepayCount = unrepayCount.reverse();

      that.repayOpt = {
        color: ["#F2592F", "#FFB801", "#69B6F2"],
        legend: {
          data: ["总还款笔数(笔)", "到期笔数(笔)", "到期未还笔数(笔)"],
          selectedMode: "multiple",
          selected: {
            "总还款笔数(笔)": true,
            "到期笔数(笔)": false,
            "到期未还笔数(笔)": false
          }
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: "category",
          data: date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "总还款笔数(笔)",
            type: "line",
            data: repayCount
          },
          {
            name: "到期笔数(笔)",
            type: "line",
            data: shouldRepayCount
          },
          {
            name: "到期未还笔数(笔)",
            type: "line",
            data: unrepayCount
          }
        ]
      };
      that.$nextTick(function() {
        let repayDom = that.$refs.repayEcharts;
        that.repayEcharts = that.$echart.init(repayDom);
        that.repayEcharts.setOption(that.repayOpt);
      });
    },
    //财务金额表
    initDailyFinance() {
      let that = this;
      let dailyFinance = that.dailyFinance || [];
      let date = [];
      let payMoney = [];
      let repayMoney = [];
      dailyFinance.forEach(item => {
        item.date = item.date.slice(5);
        date.push(item.date);
        payMoney.push(item.payMoney);
        repayMoney.push(item.repayMoney);
      });
      date = date.reverse();
      payMoney = payMoney.reverse();
      repayMoney = repayMoney.reverse();

      that.financeOpt = {
        color: ["#F2592F", "#FFB801"],
        legend: {
          data: ["放款金额(元)", "还款金额(元)"],
          selectedMode: "multiple",
          selected: {
            "放款金额(元)": true,
            "还款金额(元)": false
          }
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: "category",
          data: date
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "放款金额(元)",
            type: "line",
            data: payMoney
          },
          {
            name: "还款金额(元)",
            type: "line",
            data: repayMoney
          }
        ]
      };
      that.$nextTick(function() {
        let financeDom = that.$refs.financeEcharts;
        that.financeEcharts = that.$echart.init(financeDom);
        that.financeEcharts.setOption(that.financeOpt);
      });
    },

    //显示判断-总额用户
    showTotalUser() {
      let that = this;
      let totalUser = that
        .urlPermissions()
        .indexOf("/stats/dashboard/totalUser");
      if (totalUser == "-1") {
        that.isShowTotalUser = false;
      } else {
        that.isShowTotalUser = true;
      }
    },
    //显示判断-总额财务
    showTotalFinance() {
      let that = this;
      let totalFinance = that
        .urlPermissions()
        .indexOf("/stats/dashboard/totalFinance");
      if (totalFinance == "-1") {
        that.isShowTotalFinance = false;
      } else {
        that.isShowTotalFinance = true;
      }
    },
    //显示判断-每日借款
    showBorrow() {
      let that = this;
      let borrow = that
        .urlPermissions()
        .indexOf("/stats/dashboard/dailyBorrowInfo");
      if (borrow == "-1") {
        that.isShowBorrow = false;
      } else {
        that.isShowBorrow = true;
      }
    },
    //显示判断-每日还款
    showRepay() {
      let that = this;
      let repay = that
        .urlPermissions()
        .indexOf("/stats/dashboard/dailyRepayInfo");
      if (repay == "-1") {
        that.isShowRepay = false;
      } else {
        that.isShowRepay = true;
      }
    },
    //显示判断-财务金额
    showFinance() {
      let that = this;
      let finance = that
        .urlPermissions()
        .indexOf("/stats/dashboard/dailyFinanceInfo");
      if (finance == "-1") {
        that.isShowFinance = false;
      } else {
        that.isShowFinance = true;
      }
    }
  },
  mounted() {
    let that = this;
    Promise.all([
      that.showTotalUser(),
      that.showTotalFinance(),
      that.showBorrow(),
      that.showRepay(),
      that.showFinance()
    ]).then(arr => {
      that.getTotalUser(),
        that.getTotalFinance(),
        that.getDaliyBorrow(),
        that.getDailyRepay(),
        that.getDailyFinance();
    });
  },
};
</script>
<style lang="less">
.workbanch-page {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .totalStatistics {
    .total-warp {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20px;
      .total-item {
        flex-shrink: 0;
        width: 202px;
        height: 118px;
        padding: 25px 15px 25px 20px;
        margin-right: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        .total-item-title {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          .total-item-text {
            font-size: 14px;
            line-height: 20px;
            color: #999;
          }
          img {
            width: 25px;
            height: 25px;
          }
        }
        .total-item-number {
          font-size: 30px;
          line-height: 35px;
          color: #000;
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 5px;
          height: 100%;
          background: #8693f3;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }
        &:nth-child(2)::before {
          background: #bc8dee;
        }
        &:nth-child(3)::before {
          background: #f7ba7b;
        }
        &:nth-child(4)::before {
          background: #69b6f2;
        }
        &:nth-child(5)::before {
          background: #f48060;
        }
      }
    }
    .finance {
      .total-item {
        &:nth-child(1)::before {
          background: #69b6f2;
        }
        &:nth-child(2)::before {
          background: #f48060;
        }
        &:nth-child(3)::before {
          background: #bc8dee;
        }
        &:nth-child(4)::before {
          background: #8693f3;
        }
        &:nth-child(5)::before {
          background: #f7ba7b;
        }
      }
    }
  }
  .dailyData {
    .data-warp {
      width: 520px;
      height: 502px;
      margin-right: 4%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      float: left;
      margin-bottom: 20px;
      .dailyData-display {
        width: 100%;
        height: 154px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background: #f9f9f9;
        .dailyData-item {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: flex-start;
          padding: 8px 16px;
          .data-title {
            width: 20%;
            text-align: left;
            color: #333;
            font-size: 12px;
            line-height: 18px;
          }
          .data-time {
            width: 20%;
            text-align: left;
            color: #999;
            font-size: 12px;
            line-height: 18px;
          }
          .data-number {
            width: 20%;
            text-align: left;
            color: #333;
            font-size: 20px;
            line-height: 22px;
          }
          .finance-item {
            width: 50%;
          }
        }
      }
      .dailyData-echarts {
        width: 100%;
        height: 348px;
        background: #fff;
        // border: 1px solid #e4e7ed;
      }
    }
  }
}
</style>
